<template>
  <div>
    <div class="pageTitleWhole viye_detala">
      <div style="color:#1890FF;float:left;margin-right:15px;cursor:pointer">
        <router-link :to="`/orderCenter/shipLoadingAndNot?f=1`">
          <a-icon type="left" />返回
        </router-link>
      </div>
      <a-breadcrumb :routes="routes">
        <template slot="itemRender" slot-scope="{ route, routes, paths }">
          <span v-if="routes.indexOf(route) === routes.length - 1">{{ route.breadcrumbName }}</span>
          <router-link v-else :to="`${basePath}/${paths.join('/')}`">{{ route.breadcrumbName }}</router-link>
        </template>
      </a-breadcrumb>
    </div>
    <div class="voyageDE">
      <div class="voyageDETitle" :span="24">
        <h3>
          <img src="../../../static/images/voyage-icon.png" alt srcset />
          航次：{{detailData.voyageNumber}}
        </h3>
      </div>
      <a-row>
        <a-col :span="21">
          <a-col :span="7" style="margin-left:62px;">
            <div class="HCdetail">船名：{{detailData.shipName}}</div>
            <div class="HCdetail">起航日期：{{detailData.departureDate}}</div>
            <div class="HCdetail">结束日期：{{detailData.arriveDate ? detailData.arriveDate: '--'}}</div>
          </a-col>
          <a-col :span="7">
            <div class="HCdetail">始发港：{{detailData.departurePortName}}</div>
            <div class="HCdetail">航程：{{detailData.mileage}}</div>
            <div class="HCdetail">船长：{{detailData.captainName}}</div>
          </a-col>
          <a-col :span="7">
            <div class="HCdetail">目的港：{{detailData.arrivePortName}}</div>
            <div class="HCdetail">航期：{{detailData.sailingDays}}</div>
            <div class="HCdetail">船APP账号：{{detailData.phone}}</div>
          </a-col>
        </a-col>
        <a-col :span="3">
          <h2
            class="HCdetail_zt"
          >{{detailData.status === 1 ? '待执行' : detailData.status === 2 ? '执行中' : '结束'}}</h2>
        </a-col>
      </a-row>
    </div>
    <a-row style="background:#fff;padding:24px 24px 24px 62px;">
      <a-col :span="21">
        <span class="hangc">航线</span>
        <a-steps progress-dot>
          <a-step
            v-for="(item,index) in shipVoyagePortList"
            :key="index"
            :title="item.portName"
            :status="item.status==1 ? 'process': item.status==2 ? 'finish' : 'wait'"
          />
        </a-steps>
      </a-col>
    </a-row>
    <a-tabs
      :active-key="currentTab"
      :animated="false"
      style="min-height:550px;padding-bottom:20px;"
      :tab-bar-gutter="16"
      class="chuanb"
      @change="tabChange"
    >
      <a-tab-pane key tab="当前在船箱量" style="padding:8px 24px 24px 24px;">
        <a-card :bordered="false">
          <div class="card-title">装箱情况</div>
          <a-form-model :model="form" ref="form" layout="inline">
            <a-form-model-item label="箱号/封号/运单号/公司编号" prop="codeLike">
              <a-input v-model="form.codeLike" />
            </a-form-model-item>
            <a-form-model-item label="持箱人" prop="holderId">
              <a-select v-model="form.holderId" style="width:200px;">
                <a-select-option value>全部</a-select-option>
                <a-select-option
                  v-for="(item,index) in holderList"
                  :key="index"
                  :value="item.id"
                >{{item.name}}</a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item label="所属操作" prop="handlerId">
              <a-select v-model="form.handlerId" class="selectInputWidth">
                <a-select-option
                  v-for="(item,index) in handlerList"
                  :key="index"
                  :value="item.uiId"
                >{{item.name}}</a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item label="箱态" prop="emptyOrHeavy">
              <a-select v-model="form.emptyOrHeavy" style="width:120px;">
                <a-select-option value>全部</a-select-option>
                <a-select-option :value="1">空箱</a-select-option>
                <a-select-option :value="2">重箱</a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item label="箱型" prop="containerTypeId">
              <a-select v-model="form.containerTypeId" style="width:120px;">
                <a-select-option value>全部</a-select-option>
                <a-select-option
                  v-for="(item,index) in containerList"
                  :key="index"
                  :value="item.id"
                >{{item.name}}</a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item label="始发港" prop="startPortId">
              <a-select v-model="form.startPortId" style="width:120px;">
                <a-select-option value>全部</a-select-option>
                <a-select-option
                  v-for="(item,index) in portList"
                  :key="index"
                  :value="item.id"
                >{{item.name}}</a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item label="目的港" prop="endPortId">
              <a-select v-model="form.endPortId" style="width:120px;">
                <a-select-option value>全部</a-select-option>
                <a-select-option
                  v-for="(item,index) in portList"
                  :key="index"
                  :value="item.id"
                >{{item.name}}</a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item>
              <a-button type="primary" @click="check">查 询</a-button>
            </a-form-model-item>
            <a-form-model-item>
              <a-button type="primary" @click="excelExport">导出Excel</a-button>
            </a-form-model-item>
          </a-form-model>
          <a-table
            :columns="columns"
            :loading="loading"
            :data-source="data"
            style="margin-top:25px;"
            :scroll="{x:1800, y:800}"
            :pagination="pagination"
            :row-key="(record,index) => index"
          >
            <template slot="company" slot-scope="text, record">
              <a v-if="record.shipOrderCode" @click="companyDetail(record)">{{record.shipOrderCode}}</a>
              <span v-else>--</span>
            </template>
            <template slot="status" slot-scope="text, record">
              <span v-if="record.containerStatus === 'A'">A</span>
              <span v-else-if="record.containerStatus === 'COMMON'">普通</span>
              <span v-else-if="record.containerStatus === 'BROKEN'">坏箱</span>
              <span v-else-if="record.containerStatus === 'DIRTY'">污箱</span>
            </template>
          </a-table>
        </a-card>
      </a-tab-pane>
      <a-tab-pane
        v-for="v in shipVoyagePortList"
        :key="v.portId"
        :tab="v.portName"
        style="padding:8px 24px 24px 24px;"
      >
        <a-card :bordered="false">
          <div class="card-title">{{v.portName}}</div>
          <a-form-model :model="form" ref="form" layout="inline">
            <a-form-model-item label="箱号/封号/运单号/公司编号" prop="codeLike">
              <a-input v-model="form.codeLike" />
            </a-form-model-item>
            <a-form-model-item label="持箱人" prop="holderId">
              <a-select v-model="form.holderId" style="width:200px;">
                <a-select-option value>全部</a-select-option>
                <a-select-option
                  v-for="(item,index) in holderList"
                  :key="index"
                  :value="item.id"
                >{{item.name}}</a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item label="所属操作" prop="handlerId">
              <a-select v-model="form.handlerId" class="selectInputWidth">
                <!-- <a-select-option value>请选择操作员</a-select-option> -->
                <a-select-option
                  v-for="(item,index) in handlerList"
                  :key="index"
                  :value="item.uiId"
                >{{item.name}}</a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item label="装卸类型" prop="status">
              <a-select v-model="form.voyageContainerStatus" style="width:120px;">
                <a-select-option value>全部</a-select-option>
                <a-select-option :value="1">预装船</a-select-option>
                <a-select-option :value="2">装船</a-select-option>
                <a-select-option :value="3">卸船</a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item label="始发港" prop="startPortId">
              <a-select v-model="form.startPortId" style="width:120px;">
                <a-select-option value>全部</a-select-option>
                <a-select-option
                  v-for="(item,index) in portList"
                  :key="index"
                  :value="item.id"
                >{{item.name}}</a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item label="目的港" prop="endPortId">
              <a-select v-model="form.endPortId" style="width:120px;">
                <a-select-option value>全部</a-select-option>
                <a-select-option
                  v-for="(item,index) in portList"
                  :key="index"
                  :value="item.id"
                >{{item.name}}</a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item label="箱型" prop="containerTypeId">
              <a-select v-model="form.containerTypeId" style="width:120px;">
                <a-select-option value>全部</a-select-option>
                <a-select-option
                  v-for="(item,index) in containerList"
                  :key="index"
                  :value="item.id"
                >{{item.name}}</a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item label="箱态" prop="emptyOrHeavy">
              <a-select v-model="form.emptyOrHeavy" style="width:120px;">
                <a-select-option value>全部</a-select-option>
                <a-select-option :value="1">空箱</a-select-option>
                <a-select-option :value="2">重箱</a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item>
              <a-button type="primary" @click="check">查 询</a-button>
            </a-form-model-item>
            <a-form-model-item>
              <a-button type="primary" @click="excelExport">导出Excel</a-button>
            </a-form-model-item>
            <a-form-model-item>
              <a-button type="primary" @click="yzc">预装船</a-button>
            </a-form-model-item>
            <a-form-model-item>
              <a-button type="primary" @click="zc">装船</a-button>
            </a-form-model-item>
            <a-form-model-item>
              <a-button type="primary" @click="xc">卸船</a-button>
            </a-form-model-item>
            <a-form-model-item>
              <a-button type="primary" @click="delInfo">删除预装信息</a-button>
            </a-form-model-item>
            <a-form-model-item>
              <a-button type="primary" @click="showModal">箱号批量查询</a-button>
            </a-form-model-item>
          </a-form-model>
          <a-table
            :columns="portColumns"
            :loading="loading"
            :data-source="data"
            style="margin-top:25px;"
            :scroll="{x:2000, y:800}"
            :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
            :pagination="pagination"
            :row-key="(record,index) => index"
          >
            <template slot="loadStatus" slot-scope="text,record">
              <span v-if="record.voyageContainerStatus === 1">预装船</span>
              <span v-else-if="record.voyageContainerStatus === 2">已装船</span>
              <span v-else-if="record.voyageContainerStatus === 3">已卸船</span>
            </template>
            <!-- <template slot="date" slot-scope="text,record">
              <span v-if="record.voyageContainerStatus === 1">--</span>
              <span
                v-else-if="record.voyageContainerStatus === 2"
              >{{record.loadingTime ? record.loadingTime : '--'}}</span>
              <span
                v-else-if="record.voyageContainerStatus === 3"
              >{{record.unloadingTime ? record.unloadingTime : '--'}}</span>
            </template>-->
            <template slot="company" slot-scope="text,record">
              <a v-if="record.shipOrderCode" @click="companyDetail(record)">{{record.shipOrderCode}}</a>
              <span v-else>--</span>
            </template>
            <template slot="status" slot-scope="text,record">
              <span v-if="record.containerStatus === 'A'">A</span>
              <span v-else-if="record.containerStatus === 'COMMON'">普通</span>
              <span v-else-if="record.containerStatus === 'BROKEN'">坏箱</span>
              <span v-else-if="record.containerStatus === 'DIRTY'">污箱</span>
            </template>
          </a-table>
        </a-card>
      </a-tab-pane>
    </a-tabs>
    <a-modal
      title="选择配船方式"
      :visible="visible"
      :footer="null"
      :width="640"
      centered
      @cancel="cancelModal"
    >
      <div class="modalBtn" @click="fromOrders">从订单中选择</div>
      <div class="modalBtn" v-if="containerOrExcel === 1" @click="fromContainers">从箱管中心选择</div>
      <div class="modalBtn" v-else @click="fromExcel">从Excel表格导入</div>
    </a-modal>
    <a-modal
      title="卸船"
      :footer="null"
      :visible="unloadStatus"
      :width="1000"
      centered
      @cancel="cancelUnload"
      destroyOnclose
    >
      <unload :formObj="formObj" @setVisible="setUnload" />
    </a-modal>
    <a-modal
      title="预装船选择—选择订单"
      :footer="null"
      :visible="orderStatus"
      :width="1100"
      centered
      @cancel="cancelOrder"
      destroyOnclose
    >
      <orderModal :orderObj="orderObj" @setOrderVisible="setFromOrder" />
    </a-modal>
    <a-modal
      title="预装船选择—从箱管中心选择"
      :footer="null"
      :visible="containerStatus"
      :width="1000"
      centered
      @cancel="cancelContainer"
      destroyOnclose
    >
      <containerModal :containerObj="containerObj" @setContainerVisible="setFromContainer" />
    </a-modal>
    <a-modal
      v-model="fileStatus"
      title="预装船选择—表格导入"
      :body-style="{padding:'30px 40px 20px 20px'}"
      :footer="null"
      :width="1000"
      centered
      destroyOnClose
    >
      <uploadFile :length="1" :fileObj="fileObj" @uploadFile="contractPics" />
    </a-modal>
    <a-modal
      v-model="checkVisible"
      title="箱号批量查询"
      :body-style="{padding:'30px 40px 25px'}"
      :width="600"
      centered
      okText="查询"
      @cancel="cancelCheck"
      @ok="containerCheck"
      destroyOnClose
    >
      <a-textarea v-model="containerValue" placeholder="请输入箱号进行查询" :auto-size="{ minRows: 6 }" />
      <div style="margin-top:10px">*输入时请注意，每行一个箱号</div>
    </a-modal>
  </div>
</template>
<script>
import { commonExport } from '@/api/request'
import {
  querySellerDown,
  queryHolderNameList,
  queryContainerTypeList,
  queryPortNameList
} from '@/api'
import { getShipVoyageById } from '@/api/shipCenter'
import {
  queryVoyageContainerList,
  loadContainer,
  cancelAdvanceLoadContainer
} from '@/api/orderCenter'
import unload from './modal/unloadModal'
import orderModal from './modal/orderModal'
import containerModal from './modal/containerModal'
import uploadFile from './modal/uploadFile'
const columns = [
  {
    title: '序号',
    width: 80,
    customRender: (text, record, index) => {
      return index + 1
    }
  },
  {
    title: '公司编号',
    dataIndex: 'shipOrderCode',
    scopedSlots: {
      customRender: 'company'
    },
    width: 150
  },
  {
    title: '箱号',
    dataIndex: 'containerNo'
  },
  {
    title: '封号',
    dataIndex: 'containerSealNo',
    customRender: (text, record, index) => {
      return record.containerSealNo || '--'
    }
  },
  {
    title: '运单号',
    width: 150,
    dataIndex: 'seagoingShipOrderCode',
    customRender: (text, record, index) => {
      return record.seagoingShipOrderCode || '--'
    }
  },
  {
    title: '持箱人',
    dataIndex: 'holderName',
    width: 260
  },
  {
    title: '操作人员',
    dataIndex: 'handler',
    customRender: (text, record, index) => {
      return record.handler || '--'
    }
  },
  {
    title: '始发港',
    customRender: (text, record, index) => {
      return record.startPortName || '--'
    },
    dataIndex: 'startPortName'
  },
  {
    title: '目的港',
    customRender: (text, record, index) => {
      return record.endPortName || '--'
    },
    dataIndex: 'endPortName'
  },
  {
    title: '箱型',
    dataIndex: 'containerType'
  },
  {
    title: '箱态',
    dataIndex: 'emptyOrHeavy',
    _needName: true,
    customRender: (text, record, index) => {
      return record.emptyOrHeavy === 1 ? '空' : '重'
    }
  },
  {
    title: '箱况',
    dataIndex: 'containerStatus',
    _needName: true,
    scopedSlots: {
      customRender: 'status'
    }
  },
  {
    title: '货名',
    dataIndex: 'goodsName',
    customRender: (text, record, index) => {
      return record.goodsName || '--'
    }
  },
  {
    title: '货重（吨）',
    width: 120,
    dataIndex: 'goodsWeight',
    customRender: (text, record, index) => {
      return record.goodsWeight || '--'
    }
  },
  {
    title: '装船日期',
    width: 150,
    dataIndex: 'loadingTime',
    customRender: (text, record, index) => {
      return record.loadingTime || '--'
    }
  }
]
const portColumns = [
  {
    title: '序号',
    width: 80,
    customRender: (text, record, index) => {
      return index + 1
    }
  },
  {
    title: '装卸类型',
    width: 90,
    dataIndex: 'voyageContainerStatus',
    _needName: true,
    scopedSlots: {
      customRender: 'loadStatus'
    }
  },
  {
    title: '装卸日期',
    width: 120,
    dataIndex: 'loadingOrUnloadTime'
    // scopedSlots: {
    //   customRender: 'date'
    // }
  },
  {
    title: '公司编号',
    dataIndex: 'shipOrderCode',
    scopedSlots: {
      customRender: 'company'
    },
    width: 150
  },
  {
    title: '箱号',
    dataIndex: 'containerNo'
  },
  {
    title: '封号',
    dataIndex: 'containerSealNo',
    customRender: (text, record, index) => {
      return record.containerSealNo || '--'
    }
  },
  {
    title: '运单号',
    width: 150,
    dataIndex: 'seagoingShipOrderCode',
    customRender: (text, record, index) => {
      return record.seagoingShipOrderCode || '--'
    }
  },
  {
    title: '持箱人',
    dataIndex: 'holderName',
    width: 260
  },
  {
    title: '操作人员',
    dataIndex: 'handler',
    customRender: (text, record, index) => {
      return record.handler || '--'
    }
  },
  {
    title: '始发港',
    dataIndex: 'startPortName',
    customRender: (text, record, index) => {
      return record.startPortName || '--'
    }
  },
  {
    title: '目的港',
    dataIndex: 'endPortName',
    customRender: (text, record, index) => {
      return record.endPortName || '--'
    }
  },
  {
    title: '箱型',
    dataIndex: 'containerType'
  },
  {
    title: '箱态',
    dataIndex: 'emptyOrHeavy',
    _needName: true,
    customRender: (text, record, index) => {
      return record.emptyOrHeavy === 1 ? '空' : '重'
    }
  },
  {
    title: '箱况',
    dataIndex: 'containerStatus',
    _needName: true,
    scopedSlots: {
      customRender: 'status'
    }
  },
  {
    title: '货名',
    dataIndex: 'goodsName',
    customRender: (text, record, index) => {
      return record.goodsName || '--'
    }
  },
  {
    title: '货重（吨）',
    width: 120,
    dataIndex: 'goodsWeight',
    customRender: (text, record, index) => {
      return record.goodsWeight || '--'
    }
  },
  {
    title: '装船日期',
    width: 150,
    dataIndex: 'loadingTime',
    customRender: (text, record, index) => {
      return record.loadingTime || '--'
    }
  }
]
const defaultForm = () => ({
  codeLike: '',
  holderId: '',
  emptyOrHeavy: '',
  containerTypeId: '',
  startPortId: '',
  endPortId: '',
  voyageContainerStatus: '',
  handlerId: ''
})
export default {
  props: ['id'],
  components: {
    unload,
    orderModal,
    containerModal,
    uploadFile
  },
  data () {
    return {
      handlerList: [],
      basePath: '/orderCenter',
      routes: [
        {
          path: '/shipLoadingAndNot',
          breadcrumbName: '配船卸船'
        },
        {
          path: '',
          breadcrumbName: '操作'
        }
      ],
      detailData: {},
      shipVoyagePortList: [],
      form: {
        ...defaultForm()
      },
      loading: true,
      pageNum: 1,
      pageSize: 10,
      holderList: [],
      containerList: [],
      portList: [],
      columns,
      data: [],
      pagination: {},
      currentTab: '',
      portColumns,
      selectedRowKeys: [],
      selectedRows: [],
      visible: false,
      unloadStatus: false,
      formObj: {},
      orderStatus: false,
      orderObj: {},
      containerStatus: false,
      containerObj: {},
      fileStatus: false,
      fileObj: {},
      containerOrExcel: 0, // 0 excel, 1 箱管
      btnControl: {},
      containerValue: '',
      checkVisible: false,
      containerNoList: []
    }
  },
  methods: {
    handlerListRequest (e) {
      querySellerDown(e)
        .then(res => {
          // // console.log(res)
          this.handlerList = res.data
          this.handlerList = res.data.map((v, i) => {
            if (!v.uiId) {
              v.name = '请选择'
              v.uiId = ''
            }
            return v
          })
          this.form.handlerId = this.handlerList[0].uiId
          this.orderListRequest({
            ...this.form,
            pageNum: this.pageNum,
            pageSize: this.pageSize
          })
        })
        .catch(rs => { })
    },
    holderListRequest (e) {
      queryHolderNameList(e)
        .then(res => {
          this.holderList = res.data
        })
        .catch(rs => {})
    },
    containerListRequest (e) {
      queryContainerTypeList(e)
        .then(res => {
          this.containerList = res.data
        })
        .catch(rs => {})
    },
    portListRequest (e) {
      queryPortNameList(e)
        .then(res => {
          this.portList = res.data
        })
        .catch(rs => {})
    },
    voyageContainerListRequest (e) {
      this.loading = true
      queryVoyageContainerList(e)
        .then(res => {
          this.data = res.data.list
          let currentPage = this.pageNum
          this.pagination = {
            current: currentPage,
            pageSize: res.data.pageSize,
            total: res.data.total,
            showQuickJumper: false,
            showSizeChanger: true,
            pageSizeOptions: ['10', '30', '50', '100', '500'],
            showTotal: total =>
              `共${total}条记录 第${currentPage}/${res.data.pages}页`,
            onChange: pageNum => {
              this.pageNum = pageNum
              let paramData = {
                ...this.form,
                pageSize: this.pageSize,
                pageNum: this.pageNum
              }
              paramData.voyageId = this.id
              if (this.currentTab) {
                paramData.searchPortId = this.currentTab
                paramData.status = ''
                paramData.containerNoList = this.containerNoList
              } else {
                // paramData.handlerId = ''
                paramData.searchPortId = ''
                paramData.status = 2
                delete paramData.containerNoList
              }
              // // console.log(pageNum)
              // // console.log(paramData)
              this.voyageContainerListRequest(paramData)
            },
            onShowSizeChange: (current, size) => {
              // // console.log(current, size)
              this.pageNum = current
              this.pageSize = size
              let paramData = {
                ...this.form,
                pageSize: this.pageSize,
                pageNum: this.pageNum
              }
              paramData.voyageId = this.id
              if (this.currentTab) {
                paramData.searchPortId = this.currentTab
                paramData.status = ''
                paramData.containerNoList = this.containerNoList
              } else {
                // paramData.handlerId = ''
                paramData.searchPortId = ''
                paramData.status = 2
                delete paramData.containerNoList
              }
              // console.log(paramData)
              this.voyageContainerListRequest(paramData)
            }
          }
          this.loading = false
        })
        .catch(rs => {})
    },
    loadContainerRequest (e) {
      loadContainer(e)
        .then(res => {
          if (res.code === 0) {
            this.$message.success('装船成功！')
            this.pageNum = 1
            this.pageSize = 10
            this.selectedRowKeys = []
            this.selectedRows = []
            Object.assign(this.form, defaultForm())
            this.check()
          }
        })
        .catch(rs => {})
    },
    delLoadRequest (e) {
      cancelAdvanceLoadContainer(e)
        .then(res => {
          if (res.code === 0) {
            this.$message.success('删除预装成功')
            this.pageNum = 1
            this.pageSize = 10
            this.selectedRowKeys = []
            this.selectedRows = []
            Object.assign(this.form, defaultForm())
            this.check()
          }
        })
        .catch(rs => {})
    },
    getShipVoyageDetail (param) {
      let _this = this
      getShipVoyageById(param)
        .then(res => {
          _this.detailData = res.data
          _this.shipVoyagePortList = res.data.shipVoyagePortList
        })
        .catch(rs => {})
    },
    tabChange (key) {
      let _t = this
      _t.currentTab = key
      _t.pageNum = 1
      _t.pageSize = 10
      _t.selectedRowKeys = []
      _t.selectedRows = []
      Object.assign(this.form, defaultForm())
      _t.check()
    },
    companyDetail (e) {
      window.open(`/orderCenter/order/detail/${e.orderShipId}`, '_blank')
    },
    check () {
      let param = this.form
      param.voyageId = this.id
      param.pageNum = this.pageNum
      param.pageSize = this.pageSize
      if (this.currentTab) {
        param.searchPortId = this.currentTab
        param.status = ''
        param.containerNoList = this.containerNoList
      } else {
        // param.handlerId = ''
        param.searchPortId = ''
        param.status = 2
        delete param.containerNoList
      }
      this.voyageContainerListRequest(param)
    },
    excelExport () {
      let param = this.form
      param.voyageId = this.id
      param.pageNum = this.pageNum
      param.pageSize = this.pageSize
      if (this.currentTab) {
        param.searchPortId = this.currentTab
        param.status = ''
        param.columns = this.portColumns
      } else {
        param.searchPortId = ''
        param.status = 2
        param.columns = this.columns
      }
      commonExport('/order/exportVoyageContainerList', param)
    },
    onSelectChange (selectedRowKeys, selectedRows) {
      // // console.log(selectedRowKeys)
      // console.log(selectedRows)
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    cancelModal () {
      this.visible = false
    },
    yzc () {
      if (!this.btnControl.prefabricatedShip) {
        this.$message.error('您无此权限！')
        return false
      }
      this.visible = true
      let currentTab = this.currentTab
      let isContainerManagement
      this.shipVoyagePortList.forEach(v => {
        if (v.portId === currentTab) {
          isContainerManagement = v.isContainerManagement
        }
      })
      if (isContainerManagement === 0) {
        this.containerOrExcel = 0
        // this.$message.error('当前港口无箱管中心')
        // return false
      } else {
        this.containerOrExcel = 1
      }
    },
    zc () {
      if (!this.btnControl.shipment) {
        this.$message.error('您无此权限！')
        return false
      }
      let _t = this
      let selectNum = 0
      let idList = []
      _t.selectedRows.forEach(v => {
        if (v.voyageContainerStatus === 1) {
          idList.push(v.id)
          selectNum++
        }
      })
      if (_t.selectedRows.length === 0 || selectNum === 0) {
        _t.$message.warning('请先选择预装船状态的集装箱')
        return false
      }
      const h = _t.$createElement
      _t.$confirm({
        title: h('div', {}, [
          h('span', '确定将这'),
          h(
            'span',
            { style: { padding: '0 3px', color: 'orange', fontSize: '20px' } },
            selectNum
          ),
          h('span', '个预装船的集装箱设置为实际装船状态？')
        ]),
        onOk () {
          _t.loadContainerRequest({
            idList: idList,
            portId: _t.currentTab,
            voyageId: _t.id
          })
        }
      })
    },
    delInfo () {
      if (!this.btnControl.drop) {
        this.$message.error('您无此权限！')
        return false
      }
      let _t = this
      let selectNum = 0
      let idList = []
      _t.selectedRows.forEach(v => {
        if (v.voyageContainerStatus === 1) {
          idList.push(v.id)
          selectNum++
        }
      })
      if (_t.selectedRows.length === 0 || selectNum === 0) {
        _t.$message.warning('请先选择预装船状态的集装箱')
        return false
      }
      const h = _t.$createElement
      _t.$confirm({
        title: h('div', {}, [
          h('span', '当前港口共'),
          h(
            'span',
            { style: { padding: '0 3px', color: 'orange', fontSize: '20px' } },
            selectNum
          ),
          h('span', '个预装船信息，确定删除所有预装船数据？')
        ]),
        onOk () {
          _t.delLoadRequest({
            idList: idList,
            voyageId: _t.id
          })
        }
      })
    },
    xc () {
      if (!this.btnControl.shipUnloading) {
        this.$message.error('您无此权限！')
        return false
      }
      this.unloadStatus = true
      this.formObj = {
        voyageId: this.id,
        portId: this.currentTab
      }
    },
    cancelUnload () {
      this.unloadStatus = false
    },
    setUnload (e) {
      if (e) {
        this.unloadStatus = false
        this.check()
      }
    },
    fromOrders () {
      if (!this.btnControl.shipAllocationTypeFromOrder) {
        this.$message.error('您无此权限！')
        return false
      }
      this.orderStatus = true
      this.orderObj = {
        shipId: this.detailData.shipId,
        voyageId: this.id,
        portId: this.currentTab
      }
    },
    setFromOrder (e) {
      if (e) {
        this.cancelOrder()
        this.check()
      }
    },
    cancelOrder () {
      this.orderStatus = false
      this.visible = false
    },
    fromContainers () {
      if (!this.btnControl.shipAllocationTypeFromContainer) {
        this.$message.error('您无此权限！')
        return false
      }
      this.containerStatus = true
      this.containerObj = {
        voyageId: this.id,
        portId: this.currentTab
      }
    },
    setFromContainer (e) {
      if (e) {
        this.cancelContainer()
        this.check()
      }
    },
    cancelContainer () {
      this.containerStatus = false
      this.visible = false
    },
    fromExcel () {
      if (!this.btnControl.shipAllocationTypeFromExcel) {
        this.$message.error('您无此权限！')
        return false
      }
      this.fileStatus = true
      this.fileObj = {
        voyageId: this.id,
        portId: this.currentTab
      }
    },
    contractPics (e) {
      if (e) {
        this.check()
        setTimeout(() => {
          this.fileStatus = false
          this.visible = false
        }, 200)
      }
    },
    showModal () {
      this.containerValueT = this.containerValue
      this.checkVisible = true
    },
    containerCheck () {
      let containerNoList = this.containerValue.split(/[\s\n]/)
      if (containerNoList.length === 1 && containerNoList[0] === '') {
        containerNoList = []
      }
      this.containerNoList = containerNoList
      this.check()
      setTimeout(() => {
        this.checkVisible = false
      }, 200)
    },
    cancelCheck () {
      this.containerValue = this.containerValueT
      this.checkVisible = false
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.btnControl = this.$root._bc
      // console.log(this.$root._bc)
    })
    this.handlerListRequest({
      type: 1,
      dataRole: 'CONTAINER_OPR',
      status: 1
    })
    this.getShipVoyageDetail({ id: this.id })
    this.holderListRequest({})
    this.containerListRequest({})
    this.portListRequest({
      status: 1
    })
    this.voyageContainerListRequest({
      ...this.form,
      status: 2,
      voyageId: this.id,
      pageNum: this.pageNum,
      pageSize: this.pageSize
    })
  }
}
</script>

<style lang="less" scoped>
.card-title {
  position: relative;
  padding-left: 16px;
  font-size: 18px;
  line-height: 1;
  color: #000;
  margin-bottom: 20px;
  &:before {
    content: '';
    width: 5px;
    height: 18px;
    background: #1890ff;
    border-radius: 4px;
    position: absolute;
    left: 0;
    top: -1px;
  }
}
</style>
<style>
.voyageDE {
  background: #fff;
}
.voyageDETitle {
  padding: 0 24px;
}
.voyageDETitle h3 {
  color: rgba(0, 0, 0, 0.85);
  font-weight: 600;
  font-size: 20px;
  line-height: 28px;
  height: 28px;
  margin-bottom: 20px;
}
.voyageDETitle h3 img {
  float: left;
  width: 28px;
  margin-right: 10px;
}
.HCdetail {
  padding-bottom: 10px;
}
.HCdetail_zt {
  float: right;
  padding-right: 24px;
}
.ant-steps-item-title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 80%;
  margin: 0 auto;
}
.hangc {
  position: absolute;
  top: -8px;
}
.chuanb .ant-tabs-nav-scroll {
  background: #fff;
  padding: 0 24px;
}
.ant-tabs-nav .ant-tabs-tab {
  font-size: 16px;
}
.viye_detala .ant-card {
  margin: 8px 24px;
}
.modalBtn {
  width: 70%;
  height: 70px;
  line-height: 70px;
  border-radius: 70px;
  font-size: 16px;
  text-align: center;
  border: 1px solid #eee;
  margin: 10px 15% 30px 15%;
  background: #ffeb75;
  cursor: pointer;
}
</style>
